import { getOrderList, getStatusList } from "@/api/order";  // 接口
import { useCallback, useEffect, useState } from "react"
import { SearchOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { Button, Space, Switch, Table, Form, Input, DatePicker, Select } from "antd"; // antd用到的组件
const { Option } = Select;


const OrderList = () => {
  const navigate = useNavigate()
  // 菜单列表状态
  const [orderList, setorderList] = useState<any[]>([]);
  // 加载是否完毕
  const [loading, setLoading] = useState<boolean>(false);

  const [statusList, setStatusList] = useState<any[]>([]);

  // 初始页面
  const [total, setTotal] = useState<number>(1);
  const [current, setCurrent] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(1);


  const getStatusListAsync = useCallback(async () => {
    const result: any = await getStatusList();
    setStatusList(result.data);
  }, [])


  // const getOrderListAsync = useCallback(async (page: number, pageSize: number) => {
  //   try {
  //     // 加载完成
  //     setLoading(true);
  //     const searchOption = form.getFieldsValue(true);
  //     console.log(searchOption);

  //     searchOption.createTimeBegin = searchOption.createTimeBegin?.format("YYYY-MM-DD");
  //     searchOption.createTimeEnd = searchOption.createTimeEnd?.format("YYYY-MM-DD");
  //     searchOption.reserveDate = searchOption.reserveDate?.format("YYYY-MM-DD");

  //     const result: any = await getOrderList(page, pageSize, searchOption);
  //     setLoading(false);
  //     setorderList(result.data.records); // 当前数据
  //     setTotal(result.data.total);      // 所有数据个数
  //     setCurrent(result.data.current);  // 当前页码
  //     setPageSize(result.data.size);  //  页面的几条数据

  //     console.log(result.data);


  //   } catch (err) {
  //     setLoading(false);
  //   }
  // }, [])

  // 封装请求列表函数
  const getOrderListAsync = async (page: number, pageSize: number, data:any ={})=> {
    try {
      // 加载完成
      setLoading(true);
      const searchOption = data;
      console.log(data);
      // 当前所有除 page  pageSize 的值  
      /* 
      createTimeBegin: undefined  创建时间
      createTimeEnd: undefined    结束时间
      hosname: undefined          医院名称
      orderStatus: undefine       订单号
      doutTradeNo: undefine       
      dpatientName: undefined     就诊人姓名
      reserveDate: undefined      就诊日期
      */

      searchOption.createTimeBegin = searchOption.createTimeBegin?.format("YYYY-MM-DD");
      searchOption.createTimeEnd = searchOption.createTimeEnd?.format("YYYY-MM-DD");
      searchOption.reserveDate = searchOption.reserveDate?.format("YYYY-MM-DD");

      const result: any = await getOrderList(page, pageSize, searchOption);
      setLoading(false);
      setorderList(result.data.records); // 当前数据
      setTotal(result.data.total);       // 所有数据个数
      setCurrent(result.data.current);   // 当前页码
      setPageSize(result.data.size);     // 页面有几条数据
      // console.log(result.data);
    } catch (err) {
      setLoading(false);
    }
  }

  useEffect(() => {
    getOrderListAsync(1, 5);
    getStatusListAsync();
  }, [])
  const [form] = Form.useForm();



  const formSubmin = (values: any) => {
    //  请求列表页面
    getOrderListAsync(current, pageSize, values);
    console.log(values);
  }


  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      {/* 完成搜索功能  */}
      <Form form={form} onFinish={formSubmin} layout="inline">
        <Form.Item name="hosname" style={{ width: "120px" }}>
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="outTradeNo" style={{ width: "120px" }}>
          <Input placeholder="订单号" />
        </Form.Item>

        <Form.Item name="patientName" style={{ width: "120px" }}>
          <Input placeholder="就诊人姓名" />
        </Form.Item>

        <Form.Item name="createTimeBegin" style={{ width: "120px" }}>
          <DatePicker placeholder="开始日期" />
        </Form.Item>

        <Form.Item name="createTimeEnd" style={{ width: "120px" }}>
          <DatePicker placeholder="截止日期" />
        </Form.Item>

        <Form.Item name="reserveDate" style={{ width: "120px" }}>
          <DatePicker placeholder="就诊时间" />
        </Form.Item>

        <Form.Item name="orderStatus">
          {/* 订单状态 下拉列表 */}
          <Select placeholder="订单状态">
            {statusList.map((item: any) => {
              return (
                <Option value={item.status} key={item.status}>
                  {item.comment}
                </Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button onClick={() => form.resetFields()}>清空</Button>
          </Space>

        </Form.Item>
      </Form>
      <Table
        loading={loading}
        rowKey={"id"}
        // 当前的数据
        dataSource={orderList}
        pagination={{
          current,
          pageSize,
          total,
          onChange: getOrderListAsync
        }}
        columns={[
          {
            title: "序号",
            align: "center",
            render(values, rows, index) {
              // console.log(rows);      
              return (current - 1) * pageSize + index + 1
            }
          },
          {
            title: "订单交易号",
            align: "center",
            dataIndex: "outTradeNo",
            key: "outTradeNo",
          },
          {
            title: "医院名称",
            align: "center", dataIndex: "hosname", key: "hosname"
          },

          {
            title: "科室名称", align: "center",
            key: "depname",
            dataIndex: "depname",
          },
          {
            title: "医生职称", align: "center",
            dataIndex: "title",
            key: "title",
          },
          {
            title: "安排时间", align: "center",
            dataIndex: "fetchTime",
            key: "fetchTime",
          },
          {
            title: "就诊人", align: "center",
            dataIndex: "patientName",
            key: "patientName",
          },
          {
            title: "预约号序", align: "center",
            dataIndex: "number",
            key: "number",
          },
          {
            title: "服务费(元)", align: "center",
            dataIndex: "amount",
            key: "amount",
          },
          {
            title: "订单状态", align: "center",
            key: "orderStatusString",
            render: (row: any) => row.param.orderStatusString,
          },
          {
            title: "创建时间", align: "center",
            dataIndex: "createTime",
            key: "createTime",
          },
          {
            title: "操作", align: "center",
            key: "operator",
            render: (row: any) => {
              return (
                <>
                  <Button type="primary" onClick={() => navigate(`/order/show/${row.id}`)}>
                    查看
                  </Button>
                </>
              );
            },
          }
        ]}></Table>
    </Space>
  )
}

export default OrderList